import React from 'react'
import './style.css'
import { useNavigate } from 'react-router';
function Index(Recommended: any) {
    console.log(Recommended);
    const data = Recommended.Recommended;
    const nav = useNavigate();
    const OnDetailsofpopularscience = (item:any) => {
        console.log(item)
        nav('/detailsofpopularscience', {
            state: {
                item
            }
        })
    }
    return (
        <div className='RecommendedBox'>
            <div className='RecommendedBoxs' >
                
                {
                    data && data.map((item: any, index: number) => {
                        return (
                            <div key={index} className='Recommended'
                            onClick={() => {
                                OnDetailsofpopularscience(item) as any
                            }}>
                                <div>
                                    <h3>
                                        {
                                            item.shanc
                                        }
                                    </h3>
                                </div>
                                <div className='RecommendedText'>
                                    <div style={{float:'left',marginRight:'10px'}}>
                                        {
                                            item.name
                                        }
                                    </div>
                                    <div style={{float:'left',marginRight:'10px'}}>
                                        {
                                            item.type
                                        }
                                    </div>
                                    <div style={{float:'left',marginRight:'10px'}}>
                                        {
                                            item.keshi
                                        }
                                    </div>
                                   
                                </div>

                                 <div>
                                        {
                                            item.age
                                        }人已读
                                    </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default Index